<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Certificate Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="img/certificate.png" class="logo" width="150" alt="codedamn logo" />
<p style="font-size:25px">Get your certificate of
<p>
<h1 class="blue-head">For contributing to our Project</h1>
</header>
<main>
<label for="name" style="font-size:25px">Enter your Name</label>
<br>
<input required type="text" name="Name" id="name" placeholder="Dev 1234">
<br>
<button class="btn" id="submit">Generate Certificate</button>
</main>
<div class="certTemp">
<span class="temp">
<img style="height: 150px;" id="certificate-template1" src="img/temp1.jpg" alt="template1">
<p style="text-align: center;">Template 1</p>
</span>
<span class="temp">
<img style="height: 150px;" id="certificateTemplate2" src="img/temp2.jpg" alt="template2">
<p style="text-align: center;">Template 2</p>
</span>
</div>
<div class="selectmenu">
<label for="template">Choose a template:</label>
<select name="template" id="template">
<option value="template1">Template1</option>
<option value="template2">Template2</option>
</select>
</div>
<!-- <div class="cert">
<iframe src="" id="mypdf" height="500px" width="500px" frameborder="0"></iframe>
</div> -->
<script src="https://unpkg.com/pdf-lib@1.4.0"></script>
<script src="FileSaver.js"></script>
<script src="https://unpkg.com/@pdf-lib/fontkit@0.0.4"></script>
<script src="index.js"></script>
</body>
</html>